<template>
	<div class="container">
		<div class="message-time-container" v-bind:class="{ checked: sharedPickState.messages.indexOf(message) >= 0 }">
			<!-- 自己发送的消息 -->
			<template v-if="message.direction == 0">
				<div class="sys-notificat">
					<!-- 手机号或微信号拒绝状态 -->
					<template v-if="message.messageContent.content == -1">
						<div class="sys-notificat" v-if="getJobContactData('phone') == -1">
							<div>
								已拒绝交换电话
							</div>
						</div>
						<div class="sys-notificat" v-else-if="getJobContactData('wx') == -1">
							<div>
								已拒绝交换微信
							</div>
						</div>
					</template>
					<template v-if="messageType == 'phone'">
						<div v-if="getJobContactData('phone') == 1">请求交换电话已发送</div>
					</template>
					<template v-if="messageType == 'wx'">
						<div v-if="getJobContactData('wx') == 1">请求交换微信已发送</div>
					</template>
					<div v-if="messageType == 'resume' && getJobContactData('resume') == 1">
						{{ userFlag == 0? "简历已发送" : "请求简历已发送" }}
					</div>
					<!-- 简历同意状态 -->
					<div v-if="messageType == 'resume' && getJobContactData('resume') == 2">
						简历已发送
					</div>
					<!-- 简历拒绝状态 -->
					<div v-if="messageType == 'resume' && getJobContactData('resume') == -1">
						简历已拒绝
					</div>
					<div v-if="messageType == 'interview' && getJobContactData('notice') == 1">
						面试邀请已发送
					</div>
					<div v-if="messageType == 'notice2' && getJobContactData('notice2') == 1">
					<!-- <div v-if="messageType == 'notice2' && getJobContactData('notice2') == 1"> -->
						录用通知已发送
					</div>
				</div>
			</template>
			<!-- 对方消息 -->
			<template v-else>
				<!-- 手机号 -->
				<template v-if="messageType == 'phone'">
					<!-- 手机号或微信号同意状态 自己 -->
					<template v-if="getJobContactData('phone') == 2 || getJobContactData('phone', true) == 2">
						<phoneWxShow :message="message" :jobContactData="jobContactData" />
					</template>
					<!-- 手机号或微信号拒绝状态 -->
					<template v-else-if="getJobContactData('phone', true) == -1">
						<div class="sys-notificat">
							<div>
								对方拒绝交换电话
							</div>
						</div>
					</template>
					<!-- 手机号或微信号申请状态 -->
					<template v-else-if="getJobContactData('phone', true) == 1">
						<phoneWxApply :message="message" :jobContactData="jobContactData" :jobId='jobId' :dfid='dfid'/>
					</template>
				</template>
				<!-- 微信 -->
				<template v-else-if="messageType == 'wx'">
					<!-- 手机号或微信号同意状态 自己 -->
					<template v-if="getJobContactData('wx') == 2 || getJobContactData('wx', true) == 2">
						<phoneWxShow :message="message" :jobContactData="jobContactData" />
					</template>
					<!-- 手机号或微信号拒绝状态 -->
					<template v-else-if="getJobContactData('wx', true) == -1">
						<div class="sys-notificat">
							<div>
								对方拒绝交换微信
							</div>
						</div>
					</template>
					<!-- 手机号或微信号申请状态 -->
					<template v-else-if="getJobContactData('wx', true) == 1">
						<phoneWxApply :message="message" :jobContactData="jobContactData" :jobId='jobId' :dfid='dfid'/>
					</template>
				</template>
				<!-- 面试或简历 -->
				<template v-else-if="messageType == 'notice2'">
					<div class="card">
						<div class="phone-content">
							<div class="avatar">
								<img :src="message._from.portrait" alt="" />
							</div>
							<div class="phone-content-title">
								{{getcompanyName(message.messageContent.content)}}向你发出录用通知，<br />点击查看
							</div>
						</div>
						<div class="buttons">
							<div class="button" @click="view">立即查看</div>
						</div>
					</div>
				</template>
				<!-- 面试或简历 -->
				<template v-else>
					<!-- hr向应聘者求简历 -->
					<template v-if="userFlag == 0 && messageType == 'resume'">
						<resumeApply :message="message" :jobId='jobId' :dfid='dfid' :jobContactData="jobContactData"/>
					</template>
					<template v-else-if=" messageType == 'resume' && getJobContactData('resume', true) == -1">
						<div class="sys-notificat">
							<div>
								对方拒绝发送简历
							</div>
						</div>
					</template>
					<div v-else class="card">
						<div class="phone-content">
							<div class="avatar">
								<img :src="message._from.portrait" alt="" />
							</div>
							<div class="phone-content-title" v-if="message.messageContent.extra == 'resume'">
								{{getresumeInfo(message.messageContent.content)}}
							</div>
							<div class="phone-content-title" v-else>
								{{getcompanyName(message.messageContent.content)}}向你发出面试邀请，<br />点击查看
							</div>
						</div>
						<div class="buttons">
							<div class="button" @click="view">立即查看</div>
						</div>
					</div>
				</template>
			</template>
		</div>
	</div>
</template>

<script>
	import store from "@/store";
	import wfc from "@/wfc/client/wfc";

	import QuoteInfo from "@/wfc/model/quoteInfo";

	import {
		userStore
	} from "@/pinia";

	import phoneWxShow from "./components/phoneWxShow.vue";
	import phoneWxApply from "./components/phoneWxApply.vue"
	import resumeApply from "./components/resumeApply.vue"

	import {
		getJobContact,
		getInteractionDic,
		setImInteraction,
	} from "@/common/im";
	import {
		req
	} from '@/common/vmeitime-http/'
	import api from '@/common/api.js'

	export default {
		name: "NormalInMessageContentView",
		props: {
			message: null,
			jobId:null,
			dfid:null,			
		},
		data() {
			return {
				sharedConversationState: store.state.conversation,
				sharedPickState: store.state.pick,
				highLight: false,
				quotedMessage: null,
				jobContactData: {},
				messageType: "",
				userFlag: 0,
			};
		},
		methods: {
			getresumeInfo(e){
				const info = JSON.parse(e)
				const workExperienceTimeList = ['不限经验','一年以内','1-3年','3-5年','5-8年','8年以上']
				let workExperienceTimeStr=''
				if(info.workExperienceTime*1){
					 workExperienceTimeStr = workExperienceTimeList[info.workExperienceTime+1]
				}else{
					workExperienceTimeStr ='未知'
				}
				return `${info.realName}-${workExperienceTimeStr}-${info.position}`
			},
			getcompanyName(e){
				const info = JSON.parse(e)
				return info.companyName
			},
			getJobContactnew(){
				if (this.userFlag == 0) { // 应聘者
					return req('POST', api.jobContact, {
						jobId:this.jobId,
					})
				}else{
					return req('POST', api.jobContact2, {
						jobId:this.jobId,
						hunterId:this.dfid,
					})
				}
			},
			//  async getJobContactData(type, isReversed = false) {
			// 	 if(!this.jobContactData.id){
			// 		const res  = await this.getJobContactnew()
			// 		this.jobContactData = res.result;
			// 		console.log("获取jobContactData", this.jobContactData, res);
					 
			// 	 }
					
			// 	console.log("this.jobContactData: >>", this.jobContactData);
			// 	const field = getInteractionDic(type, isReversed);
			// 	console.log('不反转，看phone字段', field,this.jobContactData[field]);
			// 	return this.jobContactData[field];
			// },
			 getJobContactData(type, isReversed = false) {
				 // if(!this.jobContactData.id){
					// const res  = await this.getJobContactnew()
					// this.jobContactData = res.result;
					// console.log("获取jobContactData", this.jobContactData, res);
					 
				 // }
					
				console.log("this.jobContactData: >>", this.jobContactData);
				const field = getInteractionDic(type, isReversed);
				console.log('不反转，看phone字段', field,this.jobContactData[field]);
				return field,this.jobContactData[field];
			},
			// 查看
			view() {
				const type = this.message.messageContent.extra;
				const content = this.message.messageContent.content;
				if (type == "interview") {
					uni.navigateTo({
						url: `/pages/im/resumeInterview/interviewInterview/interviewInterview?content=${content}`,
					});
					// router.push({
					// 	name: "interviewInterview",
					// 	params: {
					// 		content
					// 	},
					// });
				} else if (type == "resume") {
					uni.navigateTo({
						url: `/pages/im/resumeInterview/onlineResume/onlineResume?content=${content}`,
					});
					// router.push({
					// 	name: "viewResume",
					// 	params: {
					// 		content
					// 	},
					// });
				}else if(type == "notice2"){
					uni.navigateTo({
						url: `/pages/im/conversation/offerNotice?type=look&content=${content}`,
					})
				}
			},
			onClickUserPortrait(userId) {
				store.setCurrentFriend(this.message._from);
				uni.navigateTo({
					url: "/pages/contact/UserDetailPage",
					success: () => {
						console.log("nav to UserDetailPage success");
					},
					fail: (err) => {
						console.log("nav to UserDetailPage err", err);
					},
				});
			},
			openMessageContextMenu(event, message) {
				this.$parent.$emit("openMessageContextMenu", event, message);
				this.highLight = true;
			},
		},
		beforeMount() {
			const userStoreInfo = userStore();
			this.userFlag = userStoreInfo.userFlag;
			
				this.getJobContactnew().then((res) => {
					this.jobContactData = res.result;
					console.log("获取jobContactData", this.jobContactData, res);
				});
			this.messageType = this.message.messageContent.extra;
			console.log('messageType', this.messageType);
			
		},
		mounted() {
			console.log("phoneOutMessageContent mounted,电话信息",this.message);
			if (this.message.messageContent.quoteInfo) {
				let messageUid = this.message.messageContent.quoteInfo.messageUid;
				let msg = store.getMessageByUid(messageUid);
				if (!msg) {
					wfc.loadRemoteMessage(
						messageUid,
						(ms) => {
							msg = store._patchMessage(ms[0]);
							this.quotedMessage = msg;
						},
						(err) => {
							console.log("load remote message error", messageUid, err);
						}
					);
				} else {
					this.quotedMessage = msg;
				}
			}
		},
		computed: {
			isDownloading() {
				return store.isDownloadingMessage(this.message.messageId);
			},

			isMessageChecked() {
				return (
					this.sharedPickState.messages.findIndex(
						(m) => m.messageId === this.message.messageId
					) >= 0
				);
			},
		},
		components: {
			phoneWxShow,
			phoneWxApply,
			resumeApply,
		},
	};
</script>

<style lang="scss" scoped>
	$height: 166rpx;
	@mixin margin {
		$temp: 20rpx;
	  margin-top: $temp;
	  margin-bottom: $temp;
	}

	.container {
		.card {
			@include margin;
			margin-left: 48rpx;
			padding: 0 22rpx;

			width: 73.33%;
			min-height: $height;
			background: #ffffff;
			border-radius: 20rpx;
		}
	}

	.sys-notificat {
		@include margin;
		width: 100%;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #a1a1a1;
		letter-spacing: 0.4rpx;
		text-align: center;
	}

	:deep(.phone-content) {
		width: 100%;
		height: $height;

		display: flex;
		justify-content: flex-start;
		align-items: center;

		$gap: 16rpx;
		.avatar {
			margin-right: $gap;
			width: 80rpx;
			height: 80rpx;
			background: #d8d8d8;
			border: 2rpx solid #979797;
			border-radius: 8rpx;

			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.phone-content-title {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000e6;
			letter-spacing: 0.46rpx;
			text-align: justify;
		}

		.phone-content-message {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000e6;
			letter-spacing: 0.46rpx;
			text-align: justify;
		}

		.phone-button {
			width: 166rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #d8d8d8;
			border-radius: 8rpx;

			text-align: center;

			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000e6;
			letter-spacing: 0.46rpx;
		}
	}

	:deep(.buttons) {
		padding-bottom: 32rpx;

		display: flex;
		gap: 30rpx;

		justify-content: center;

		.button {
			width: 166rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #d8d8d8;
			border-radius: 8rpx;

			text-align: center;

			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000e6;
			letter-spacing: 0.46rpx;

			&:nth-of-type(2) {
				margin-left: 30rpx;
			}
		}
	}
</style>